<h3>下拉菜单</h3>
<div class="example-container">
  <!-- This button triggers the overlay and is it's origin -->
  <button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
    {{isOpen ? "Close" : "Open"}}
  </button>
  
  <!-- This template displays the overlay content and is connected to the button -->
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen"
    [cdkConnectedOverlayBackdropClass]="example-list-overlay-backdrop"
    [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayGrowAfterOpen]="true"
    [cdkConnectedOverlayOffsetY]="5"
    [cdkConnectedOverlayPositionStrategy]="top"
    (backdropClick)="backdropClick()"
  >
    <ul class="example-list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </ng-template>
</div>

<h3>居中显示</h3>
<button (click)="showOverlayGlobalPanelCenter()">页面中心显示</button>

<!-- <h3>模拟弹出框</h3>
<button (click)="showOverlayModal()">点开一个弹窗</button> -->
